<!-- 组件说明 -->
<template>
  <div>
    <h1>经文检索</h1>
    <!-- <select name="" id="">
            <option value="">新约背节</option>
            <option value="">旧约背节</option>
            <option value="">背章</option>
            <option value="">诗篇</option>
            <option value="">箴言</option>
    </select>-->
    <div class="toolBar">
      <mt-button class="fr" type="primary" size="small" @click="search">经文查询</mt-button>
    </div>
    <div class="pickerWrapper" v-show="showTypePickerYN">
      <div class="btnGroup">
        <mt-button class="fl" type="primary" size="small" @click="confirm4picker">确定</mt-button>
        <mt-button class="fr" type="danger" size="small" @click="cancel4picker">关闭</mt-button>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange" value-key="text"></mt-picker>
    </div>

    <mt-field label="经文类型" placeholder="请输入经文类型" @click.native="showTypePicker" v-model="form.type"></mt-field>
    <mt-field label="经文日期" placeholder="请输入查询日期" @click.native="openPicker" v-model="form.createDate"></mt-field>
    <!-- <input type="text" v-model="searchDate" @click="openPicker"> -->
    <!-- <DatetimePicker></DatetimePicker> -->
    <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm"></mt-datetime-picker>
    <!-- <mt-button @click="showTypePicker">测试按钮</mt-button> -->
    <ul class="scriptureList" >
        <li v-for="item in results">{{item.scripture_text}}</li>
    </ul>
    
  </div>
</template>

<script>
//import x from ''
import { DatePicker, Field, Picker, Button, Cell} from "mint-ui";
import moment from "moment";
import   {getScripturesByDate} from '../api'
export default {
  components: {
    DatePicker,
    Field,
    Picker,
    Button,
    Cell

  },
  data() {
    return {
      form: {
        createDate: moment(new Date()).format("YYYY-MM-DD"),
        type: "A"
      },
      showTypePickerYN: false,
      pickerValue: "",
      results: [],
      slots: [
        {
          flex: 1,
          values: [
            {
              text: "新约背节",
              value: "A"
            },
            {
              text: "旧约背节",
              value: "B"
            },
            {
              text: "背章",
              value: "C"
            },
            {
              text: "诗篇",
              value: "D"
            },
            {
              text: "箴言",
              value: "F"
            }
          ],
          className: "slot1",
          textAlign: "right"
        }
      ]
    };
  },
  computed: {},
  mounted() {
        console.log('vue实例化启动mount')
        getScripturesByDate(this.form).then((res) => {
            console.log('查到的经文数据', res)
            this.results = res.result
        })

        Indicator.open({
          text: 'Loading...',
          spinnerType: 'fading-circle'
        });
  },
  methods: {
    openPicker() { 
      this.$refs.picker.open();
    },
    handleConfirm(date) {
      this.form.createDate = moment(date).format("YYYY-MM-DD");
    },
    onValuesChange(picker, values) {
      // 下拉选择框
      //   if (values[0] > values[1]) {
      //     picker.setSlotValue(1, values[0]);
      //   }
      this.tempType = values[0].value;
    },
    showTypePicker() {
      console.log('showTypePicker')
      this.showTypePickerYN = !this.showTypePickerYN;
    },
    confirm4picker() {
      this.form.type = this.tempType;
      this.showTypePickerYN = false;
    },
    cancel4picker() {
      this.showTypePickerYN = false;
    },
    search(){
       getScripturesByDate(this.form).then((res) => {
          console.log('查到的经文数据', res)
          this.results = res.result
      })
    }
  },
  watch: {
    'form.type'(val, oldVal){
      getScripturesByDate(this.form).then((res) => {
          console.log('查到的经文数据', res)
          this.results = res.result
      })
    },
    'form.createDate'(val, oldVal){
      getScripturesByDate(this.form).then((res) => {
          console.log('查到的经文数据', res)
          this.results = res.result
      })
    }
  },
};


</script>

<style lang='stylus'>
.fl {
  float: left;
}

.fr {
  float: right;
}

.pickerWrapper
  position: absolute;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  text-align: center;
.scriptureList
    margin 10px 5px 1px 5px
    text-align center

.picker
    margin-top 30px
    .picker-item
        text-align center
.scriptureList
    >li
      background-color: yellowgreen;
      padding: 5px 10px;
      text-align: left;
      font-weight: bold;
      margin: 0 0 6px 0;

</style>